<template>
    <div>
        <r-search :searchHandle="searchHandleAdd" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="false" :isIndex="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                // goodsNo: '',
                goodsNo: '',
                // type: '',
                type: '',
                name: '',
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'goodsNo',
                    placeholder: '商品编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '商品名称',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'categoryId',
                    placeholder: '分类',
                    width: 150,
                    options: [
                    ]
                },
                {
                    type: 'select',
                    prop: 'type',
                    placeholder: '商品类型',
                    width: 150,
                    options: [
                        {
                            label: '计件',
                            value: 1
                        },
                        {
                            label: '计重',
                            value: 2
                        },
                    ]
                },
                {
                    type: 'select',
                    prop: 'status',
                    placeholder: '状态',
                    width: 150,
                    options: [
                        {
                            label: '上架',
                            value: 1
                        },
                        {
                            label: '下架',
                            value: 2
                        },
                    ]
                },
            ],
            searchHandleAdd: [
                {
                    label: "新增商品",
                    type: "success",
                    handle: e => this.elFormVisible()
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                // {
                //     label: 'ID',
                //     prop: 'id',
                //     // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                // },
                {
                    label: '商品编号',
                    prop: 'goodsNo',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '商品名称',
                    prop: 'name'
                },
                {
                    label: '商品图片',
                    prop: 'img',
                    type: 'image'
                },
                {
                    label: '商品分类',
                    prop: 'categoryName'
                },
                {
                    label: '成本价',
                    prop: 'costPrice'
                },
                {
                    label: '配送上门价格',
                    prop: 'price1'
                },
                {
                  label: '配送上门会员价格',
                  prop: 'vipPrice1'
                },
                {
                    label: '配送到设备价格',
                    prop: 'price2'
                },
                {
                  label: '配送到设备会员价格',
                  prop: 'vipPrice2'
                },
                {
                    label: '配送方案',
                    prop: 'type',
                    formatter: e => e.type1 == 1 && e.type2 != 1 ? '上门' : e.type2 == 1 && e.type1 != 1 ? '机柜' : e.type2 == 1 && e.type1 == 1 ? '上门/机柜' : ''
                },
                {
                    label: '状态',
                    prop: 'status',
                    formatter: e => e.status == 1 ? '上架' : e.status == 2 ? '下架' : ''
                },
                {
                    label: '操作',
                    type: "button",
                    width: 170,
                    btnList: [
                        {
                            label: '编辑',
                            type: 'primary',
                            // isShow: e => e.orderId == '123' ? true : false,
                            handle: (row) => this.elFormDetail(row)
                        },
                        {
                            label: '删除',
                            type: 'primary',
                            handle: (row) => this.TableDel('/sys/shopGoods/delete', { id: row.id }),
                        },
                    ]
                }

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                name: '',
                goodsIntroduction: "",
                categoryId: "",
                type1: "",
                type2: "",
                costPrice: "",
                price1: "",
              vipPrice1: "",
                price2: "",
              vipPrice2: "",
                img: "",
                goodsDetails: "",
                status: "",
                // unit: ""
            },
            formCols: [
                { type: "input", label: "商品名称", width: 450, prop: "name", },
                { type: "input", label: "商品简介", width: 450, prop: "goodsIntroduction", },
                { type: "select", label: "商品分类", width: 450, prop: "categoryId", options: [] },
                { type: "select", label: "是否上门商品", width: 120, prop: "type1", options: [{ label: '是', value: 1 }, { label: '否', value: 2 },] },
                { type: "select", label: "是否机柜商品", width: 120, prop: "type2", options: [{ label: '是', value: 1 }, { label: '否', value: 2 },] },
                // { type: "input", label: "商品单位", width: 450, prop: "unit", },
                { type: "input", label: "成本价", width: 80, prop: "costPrice", remark: '元' },
                { type: "input", label: "配送上门价格", width: 80, prop: "price1", remark: '元' },
                { type: "input", label: "配送上门会员价格", width: 80, prop: "vipPrice1", remark: '元' },
                { type: "input", label: "配送到设备价格", width: 80, prop: "price2", remark: '元' },
                { type: "input", label: "配送到设备会员价格", width: 80, prop: "vipPrice2", remark: '元' },
                { type: "upload", label: "商品图片", width: 200, prop: "img", remark: '只能上传jpg/png/MP4格式文件，文件不能超过500kb', rmblock: true, success: (res, file) => { this.$refs.elForm.loading = false; this.formData.img = res.data.imgPath } },
                { type: "radio", label: "状态", width: 450, prop: "status", radios: [{ label: '上架', value: 1 }, { label: '下架', value: 2 },] },
                { type: "tinymce", label: "商品详情", width: 450, prop: "goodsDetails", },

            ],
            formRules: {
                name: [
                    { required: true, message: '商品名称', trigger: 'blur' },
                ],
                goodsIntroduction: [
                    { required: true, message: '商品简介', trigger: 'blur' },
                ],
                categoryId: [
                    { required: true, message: '商品分类', trigger: 'blur' },
                ],
                // unit: [
                //     { required: true, message: '是否上门商品', trigger: 'blur' },
                // ],
                type1: [
                    { required: true, message: '是否机柜商品', trigger: 'blur' },
                ],
                type2: [
                    { required: true, message: '商品单位', trigger: 'blur' },
                ],
                costPrice: [
                    { required: true, message: '成本价', trigger: 'blur' },
                ],
                price1: [
                    { required: true, message: '配送上门价格', trigger: 'blur' },
                ],
              vipPrice1: [
                  { required: true, message: '配送上门会员价格', trigger: 'blur' },
                ],
                price2: [
                    { required: true, message: '配送到设备价格', trigger: 'blur' },
                ],
              vipPrice2: [
                { required: true, message: '配送到设备会员价格', trigger: 'blur' },
              ],
                img: [
                    { required: true, message: '商品图片', trigger: 'blur' },
                ],
                goodsDetails: [
                    { required: true, message: '状态', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '商品详情', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],
        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let parm = { ...this.tablePage, ...this.searchData }
            let res = await this.api.takelist(parm)
            if (res) {
                this.tablePage.total = res.data.total
                this.tableData = res.data.list
            }
            let resclassfy = await this.api.takecfylist({ page: 1, limit: 10000 })
            this.formCols[2].options = []
            this.searchForm[2].options = []
            if (resclassfy) {
                for (let i = 0; i < resclassfy.data.list.length; i++) {
                    this.formCols[2].options.push({ label: resclassfy.data.list[i].name, value: resclassfy.data.list[i].id })
                    this.searchForm[2].options.push({ label: resclassfy.data.list[i].name, value: resclassfy.data.list[i].id })
                }
            }
        },
        async elFormSubmit(row) {
            // console.log(row);
            if (row) {
                await this.api.takeupdate(row)
            } else {
                let res = null
                if (this.formData.id) {
                    res = await this.api.takeupdate(this.formData) //advertsave
                } else {
                    res = await this.api.takeadd(this.formData)
                }
                if (res) {
                    this.elFormVisible()
                    this.init()
                }
            }

        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            // if (this.formCols[1].label == '登录密码') {
            //     this.formCols.splice(1, 1)
            // }

            this.elFormVisible()
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
